 <include file="public:head"/>
    <link href="../css/bootstrap.css" rel="stylesheet">
    <link href="../css/jquery.range.css" rel="stylesheet">
    <link href="../css/font-awesome.min.css" rel="stylesheet">
    
    <div id="hd">
       
        
    </div>

    
 <style type="text/css">
 body{
  background-color: #f2f2f2;
 }
 .yisulayer {
    background: #323a45 !important;
}
.bd-content-wrap{
  margin-top: 130px;
  margin-bottom: 200px;
}
h2{
  margin: 0;
}
   .buyHistory:before {
      content: "\e61a";
 }
  }
   .priceXQ:before {
      content: "\e61a";
  }
   .buyYP:before {
      content: "\e61a";
  }
   .goKZT:before {
      content: "\e61a";
  }
  a,a:hover{
    text-decoration: none;
  }
  .fl{
    float: left;
  }
  .fr{
    float: right;
  }
  .headerright a,.headerleft a{
    display: inline-block;
    padding: 0 10px;
    height: 40px;
    line-height: 40px;
    color: rgba(0,0,0,.6);
  }
  .bdCheader{
    width: 100%;
    background-color: #fff;
    overflow: hidden;
    box-shadow: 0 4px 10px #eee;
  }
  .main-content{
    width: 100% !important;
  }
  .bgcolor,.headerright a:hover,.headerleft a:hover{
    background-color: #14a9ce !important;
    color: #fff !important;
  }
  .headerBtm{
    width: 100%;
    height: 70px;
    background-color: #f5f5f6;
  }
  .innerbox{
    width: 96%;
    margin: 0 auto;
    height: 70px;
    padding-top: 20px;
  }
  .step{
    display: inline-block;
    text-align: center;
    width: 24px;
    height: 24px;
    line-height: 24px;  
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    background-color: #f5f5f6;
    border: 1px solid #ccc;
    color: #ccc;
  }
  .stepColor{
    background-color: #00c1de;
    border-color: #00c1de;
    color: #fff;
  }
  .lineboxes{
    position: relative;
    float: left;
    margin-left: 10px;
  }
  .firstbox{
    width: 22%;
  }
  .secbox{
    width: 22%;
  }
  .threebox{
    width: 16%;
  }
  .fourbox{
    width: 16%;
  }
  .fivebox{
    width: 6%;
  }
  .leftes>i{
    font-style: normal;
  }
  .leftes{
    position: relative;
    z-index: 2;
    background-color: #f5f5f6;
  }
  .left1{
    width: 150px;
  }
  .left2{
    width: 180px;
  }
  .left3{
    width: 95px;
  }
  .left4{
    width: 95px;
  }
  .left5{
    width: 150px;
  }
  .lines{
    width: 100%;
    height: 1px;
    background-color: #ccc;
    position: absolute;
    top: 12px;
    left: 0;
    z-index: 1 !important;
  }
  .main-wrap{
    background: #f5f5f6 !important;
  }
  .nextwrap{
    background: #fff;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -ms-border-radius: 6px;
    -moz-border-radius: 6px;
    padding: 10px;
    margin: 10px auto;
  }
  .jfsl>li>span,.jfsl2>li>span{
    display: block;
    width: 100%;
    text-align: center;
    padding: 6px 0;
    background-color: #fff;
    border: 1px solid #ccc;
    cursor: pointer;
  }
  .colorbg{
    background: #00c1de !important;
    color: #fff !important;
    border-color:#00c1de !important; 
  }
  .answer{
    width: 30px;
    height: 30px;
    line-height: 30px;
    border: 1px solid #ccc;
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    text-align: center;
  }
  .dylist{
    background-color: #fff;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    width: 600px;
    overflow: hidden;
    position: absolute;
    top: 35px;
    left: 0;
    padding: 10px;
    z-index: 10000;
    display: none;
  }
  .dyboxes{
    width: 100%;
    overflow: hidden;
  }
  #dropdownMenu1{
    position: relative;
  }
  .dyboxes,.dyboxes dl{
    width: 100%;
    overflow: hidden;
  }
  .dyboxes dl dd{
    margin: 10px 0;
  }
  .dyboxes dl dd a{
    display: block;
    width: 100%;
    margin: 0 auto;
    height: 30px;
    line-height: 30px;
    background-color: #fff;
    text-align: center;
    color: rgba(0,0,0,.6);
    border: 1px solid rgba(0,0,0,.6);
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
  }
  .dyboxes>dl>dd:hover a{
    background: #00c1de !important;
    color: #fff !important;
    border-color:#00c1de !important; 
  }
  #dropdownMenu1>span{
    width: 100%;
    text-align: center;
    background-color: 
  } 
  .jfsl2>li{
    cursor: pointer;
  }
  i{
    font-style: normal;
  }
  .teachMe li a{
    font-size: 11px;
    color: rgba(0,0,0,.5);
    display: block;
    margin-top: 10px;
  }
  .teachMe li{
    list-style: normal !important;
  }
  .childlist{
    width: 98%;
    margin: 10px auto;
    overflow: hidden;
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid #ccc;
  }
  .childlist>li{
    float: left;
  }
  .childlist>li:nth-child(2){
    margin-left: 16px;
  }
  .childlist>li>span{
    display: block;
    border-bottom: 2px solid transparent;
  }
  .childlist>li:nth-child(1)>span{
    border-bottom: 2px solid #00c1de !important;
    color: #00c1de !important;
  }
  .childlist>li>span:hover{
    border-color: #00c1de !important;
    color: #00c1de !important;
    cursor: pointer;
    height: 40px;
    line-height: 40px;
  }
  .listul li{
    float: left;
    margin: 10px;
  }
  .listul li span{
    display: block;
    padding: 6px;
    color: rgba(0,0,0,.6);
    text-decoration: none;
  }
  .listul li span:hover{
    color: #00c1de !important;
    cursor: pointer;
  }
  .listp{
    margin-top: 16px;
  }
  .listable tr td,.listable tr th{
    padding: 10px 0;
    text-align: center;
  }
  .listable tr:hover{
    background-color: #f7f8fa;
  }
  .listable1{
    margin: 10px 0;
  }
  .listspan1{
    height: 35px;
    line-height: 35px;
    background-color: #f7f8fa;
    text-align: right;
  }
  .listspan2,.listspan3{
    height: 35px;
    line-height: 35px;
  }
  .listspan3{
    font-weight: bold;
  }
  input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{
    -webkit-appearance: none !important;            
  }
  .jsNum{
    position: relative;
    height: 32px;
    line-height: 32px;
    border: 1px solid #ccc;
  }
  .jsNum:hover .add,.jsNum:hover .reduce{
    display: block;
  }
  .jsNum input{
    border: none;
    height: 30px;
    display: block;
    width: 100%;
  }

  .reduce{
    display: inline-block;
    padding: 0 10px;
    height: 15px;
    line-height: 15px;
    position: absolute;
    right: 0;
    bottom:0;
    cursor: pointer;
    border-top: 1px solid #ccc;
    border-left: 1px solid #ccc;
  }
  .add{
    display: inline-block;
    padding: 0 10px;
    height: 15px;
    line-height: 15px;
    position: absolute;
    right: 0;
    top:0;
    cursor: pointer;
    border-left: 1px solid #ccc;
  } 
  .add,.reduce{
    display: none;
  }
  .desc{
    font-size: 10px;
    color: rgba(0,0,0,.5);
    height: 30px;
    line-height: 30px;
  }
  .cunchu{
    height: 40px;
    line-height: 40px;
    border-bottom: 2px solid #00c1de;
  }
  .colors{
    color: #f60;
  }
  .jia,.jian{
    display: inline-block;
    width: 30px;
    height: 30px;
    line-height: 30px;
    background-color: #00c1de;
    text-align: center;
    font-size: 30px;
    color: #fff;
    margin-right: 6px;
    cursor: pointer;
    float: left;
  }
  .panboxes{
    margin: 5px 0;
  }
  .jiatxt{
    height: 30px;
    line-height: 30px;
  }
  .jiabg{
    background-color: #ccc !important;
  }
  .radioBoxes{
    float: left;
    width: 30px;
    height: 30px;
    overflow: hidden;
    position: relative;
    background-color: red;
  }

  .radioBoxes input{
    vertical-align: top;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
  }
  .demo{width:350px; margin:20px auto 10px auto}
  .checkdiv{
    width: 28px !important;
    height: 28px !important;
    position: relative;
    top: 34px;
  }
  .checkdiv i{
    width: 100%;
    height: 100%;
  }
  .checkdiv input{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    filter: alpha(opacity=0);
  }
  .passbox li{
    overflow: hidden;
    float: left;
    cursor: pointer;
  }
  .colorfa:before{
    color: #00c1de !important;
  }
  #bd{
    margin-bottom: 100px;
  }
  .jiesuan{
    width: 100%;
    padding: 10px;
    background-color: #fff;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
  }
  .timediv{
    width: 100px;
    position: relative;
    float: left;
  }
  .timediv input{
    display: block;
    width: 100px;
    text-align: center;
  }
  .timetxt{
    width: 23%;
    float: left;
  }
  .timeUl{
    position: absolute;
    bottom:22px;
    right: 0;
    width: 100px;
    box-shadow: 0 4px 10px #ccc;
    z-index: 10000;
    background-color: #fff;
    display: none;
  }
  .timeUl li{
    height: 30px;
    line-height: 30px;
    width: 100%;
    text-align: center;
    cursor: pointer;
  }
  .timeUl li:hover{
    background: #00c1de !important;
    color: #fff;
  }
  .surebtn{
    float: right;
    margin-right: 50px;
  }
  .surebtn span{
    display: block;
    width: 100px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background-color: #ff8a00;
    color: #fff;
    -webkit-appearance: none;
    appearance: none;
    box-shadow: 0 0 10px #ccc;
    cursor: pointer;
    margin-top: 14px;
  }
  .peilist{
    width: 100%;
    overflow: hidden;
  }
  .peilist li{
    width: 33%;
    float: left;
    margin:10px 0;
    /*padding:10px 1%;*/
    font-size: 12px;
  }
  .cog1:before{
    color: #00c1de;
  }
.paystyle{
  background: #fff;
  padding: 10px;
}
.paystyle li{
  width: 100%;
  margin:10px auto;
}
.paystyle li label{
  display: block;
  width: 90%;
  overflow: hidden;
  margin: 10px auto;
}
.paystyle li label input{
 /* position: relative;
  top: 4px;*/
}
.paystyle li label img{
  display: inline-block;
  height: 90px;
  margin-left: 10px;
  float: left;
}
.checkdiv{
    width: 20px;
    height: 26px;
    position: relative;
    float: left;
  }
  .checkdiv i{
    width: 100%;
    height: 100%;
  }
  .checkdiv input{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    /*opacity: 0;*/
    /*filter: alpha(opacity=0);*/
  }
  .fa-dot-circle-o:before{
    font-size: 28px;
  }
 </style>
         <div class="bd-content-wrap">
            <div class="bdContent">
              <div class="bdCheader">
                <div class="headerleft fl">
                  <a href="#">云服务器 ECS</a>
                  <a href="#">一键购买</a>
                  <a href="#" class="bgcolor">自定义购买</a>
                </div>
                <div class="headerright fr">
                  <a href="#">
                    <i class="buyHistory"></i>
                    购买历史
                  </a>
                  <a href="#">
                    <i class="priceXQ"></i>
                    价格详情
                  </a>
                  <a href="#">
                    <i class="buyYP"></i>
                    购买云盘
                  </a>
                  <a href="#">
                    <i class="goKZT"></i>
                    返回控制台
                  </a>
                </div>
              </div>
            </div>
            <!-- 订单列表 -->
            <div class="nextwrap container">
              <span id="orderid" style="display: none;">{$info.orderid}</span>
              <div class="row">
                <div class="col-lg-1"><i class="fa fa-cog cog1"></i><span>所选配置</span></div>
                <div class="col-lg-11 col-offset-2 jfsl">
                  <p class="col-lg-12" style="color: #14a9ce;font-weight: bold;">基础配置</p>
                  <ul class="peilist">
                    <li>计费方式 ：
                        <if condition="$info.jifei eq 'PrePaid'">
                          包年包月
                        <else/>
                          按量付费
                        </if>  
                    </li>
                    <li>地域 ：{$info.diyuname}</li>
                    <li>实例 ：{$info.ecs.normsname}</li>
                    <li>购买数量 ：1 台</li>
                    <li>镜像 ：{$info.areaimg.osname}</li>
                    <li>系统盘 ： 
                      <if condition="$info.xipan eq 'cloud_efficiency'">
                        高效云盘
                      <else/>
                        SSD云盘
                      </if>
                       {$info.xipannei}GB
                    </li>
                    <notempty name="info.shujunei">
                    <li>
                        数据盘 ：{$info.shuju}  |   {$info.shujunei}
                    </li>
                    </notempty>
                  </ul>
                </div>  
              <div class="row">
                <div class="col-lg-1"></div>
                <div class="col-lg-11 col-offset-2 jfsl">
                  <p class="col-lg-12" style="color: #14a9ce;font-weight: bold;">网络和安全组</p>
                  <ul class="peilist">
                    <li>网络：专有网络</li>
                    <li>VPC ：默认专有网络</li>
                    <li>交换机 ：默认交换机</li>
                    <li>公网带宽 ：
                      <if condition="$info.internetchargetype eq 'PayByBandwidth'">
                          按固定带宽
                      <else/>
                          按使用流量
                      </if>{$info.internetmaxbandwidthout}Mbps
                    </li>
                    <li>安全组 ：默认安全组（自定义端口）</li>
                  </ul>
                </div>  
              </div> 
              <div class="row">
                <div class="col-lg-1"></div>
                <div class="col-lg-11 col-offset-2 jfsl">
                  <p class="col-lg-12" style="color: #14a9ce;font-weight: bold;">系统配置</p>
                  <ul class="peilist">
                    <li>登录凭证 ： <p style="width: 80%;">创建后设置，若需 <a href="#" style="color: #f00;font-weight: bold;">远程登录ECS</a>
可返回第三步系统配置里配置登录凭证</p> 
</li>
                    <li>VPC ：默认专有网络</li>
                  </ul>
                </div>  
              </div>  
              </div>  
            </div>

            <div class="container" style="background: #fff;display: none;">
              <div class="row">
                <h4 style="width: 90%;margin: 20px auto 0;">
                  请选择支付方式：
                </h4>
                <ul class="paystyle">
                  <li>
                    <label>
                      <div class="checkdiv" style="top: 0 !important;">
                        <i class="fa fa-dot-circle-o colorfa" id="0"></i>
                        <input type="radio" name="paystyle" checked>
                      </div>
                      <span style="float: left;font-size: 20px;margin-left: 37px;">余额支付</span>
                    </label>
                  </li>
                  <!-- <li>
                    <label>
                      <div class="checkdiv">
                        <i class="fa fa-dot-circle-o" id="1"></i>
                        <input type="radio" name="paystyle" checked>
                      </div>
                      <img src="images/zhifubaopay.png">
                    </label>
                  </li>
                  <li>
                    <label>
                      <div class="checkdiv">
                        <i class="fa fa-dot-circle-o" id="2"></i>
                        <input type="radio" name="paystyle">
                      </div>
                      <img src="images/weixinpay.png">
                    </label>
                  </li>
                  <li>
                    <label>
                      <div class="checkdiv" style="top: 0 !important;">
                        <i class="fa fa-dot-circle-o" id="3"></i>
                        <input type="radio" name="paystyle">
                      </div>
                        <span style="float: left;font-size: 20px;margin-left: 37px;">网银支付</span>
                    </label>
                  </li> -->
                </ul>
              </div>
            </div>
         </div>
      </div>
    </div>

    <!-- 底部结算 -->
    <div class="jiesuan">
      <!-- <div class="col-lg-3">
        <div class="timetxt">购买时长：</div>
        <div class="timediv">
          <input type="text" name="buytime" class="buytime" readonly>
          <ul class="timeUl">
            <li>一周</li>
            <li>1个月</li>
            <li>2个月</li>
            <li>3个月</li>
            <li>半年</li>
            <li>1年</li>
            <li>2年</li>
            <li>3年</li>
            <li>4年</li>
            <li>5年</li>
          </ul>
        </div>
        <div class="col-lg-12">
          <p class="col-lg-12" style="margin-top: 10px;color: rgba(0,0,0,.6);font-size: 13px;">
            公网带宽：1Mbps 按固定带宽
          </p>
        </div>
      </div> -->
      <div class="col-lg-4" style="margin-top: 20px;">
        <p class="col-lg-12">
          <span>配置费用：</span>
          <span style="color: #f60;font-size: 24px;">￥ {$info.money}</span>
          <!-- <span style="color: #2f7d0d;font-size: 12px;display: inline-block;margin-left: 10px;margin-right: 10px;">省 ￥ 12.75</span> -->
        <!--   <span style="color: #f60;font-size: 12px;">实例规格 --><!-- {($info.rulepid)*10} --><!-- 专有网络实例立享9.5折 --><!-- </span> -->
        </p>
      </div>
      <div class="surebtn">
        <span onclick="sureBuy()">确认购买</span>
      </div>
    </div>
<!-- 页面底部 -->
   <!--  <div id="ft" class="login-ft">
  <div class="footer-copyright">
    <p class="clearfix links">
      <a href="javascript:;" target="_blank">关于我们</a>
      <a href="javascript:;" target="_blank">法律声明</a>
      <a href="javascript:;">服务条款</a>
      <a href="javascript:;" target="_blank">联系方式</a>
    </p>   <p style="font-family:arial;">地址：北京市三里屯soho140号&nbsp;&nbsp;增值电信业务许可证B1-20170901&nbsp;&nbsp;COPYRIGHT&nbsp;&nbsp;©&nbsp; 2016-2017<a href="http://www.17sucai.com">17sucai</a>&nbsp;版权所有&nbsp;ICP证：京A2-20170101</p>

    <p style="font-family:arial;">增值电信营业许可证B1-20170962&nbsp;&nbsp;云平台&nbsp;&nbsp;版权所有</p>
  </div>
</div>
 -->
    <script type="text/tpl" id="tiaokuan">
      <div class="xieyi">
          <h5>云服务平台协议</h5>
          <p>在您使用云平台之前，请您仔细阅读平台服务在您使用云平台之前，请您仔细阅读平台服务在您使用云平台之前，请您仔细阅读平台服务在您使用云平台之前，请您仔细阅读平台服务在您使用云平台之前，请您仔细阅读平台服务在您使用云平台之前，请您仔细阅读平台服务在您使用云平台之前，请您仔细阅读平台服务在您使用云平台之前，请您仔细阅读平台服务在您使用云平台之前，请您仔细阅读平台服务在您使用云平台之前，请您仔细阅读平台服务在您使用云平台之前，请您仔细阅读平台服务在您使用云平台之前，请您仔细阅读平台服务在您使用云平台之前，请您仔细阅读平台服务在您使用云平台之前，请您仔细阅读平台服务在您使用云平台之前，请您仔细阅读平台服务在您使用云平台之前，请您仔细阅读平台服务</p>

          <p>在您使用云平台之前，请您仔细阅读平台服务在您使用云平台之前，请您仔细阅读平台服务在您使用云平台之前，请您仔细阅读平台服务在您使用云平台之前，请您仔细阅读平台服务在您使用云平台之前，请您仔细阅读平台服务在您使用云平台之前，请您仔细阅读之前，请您仔细阅读平台服务在您使用云平台之前，请您仔细阅读平台服务在您使用云平台之前，请您仔细阅读平台服务在您使用云平台之前，请您仔细阅读平台服务在您使用云平台之前，请您仔细阅读平台服务</p>

          <p>在您使用云平台之前，请您仔细阅读平台服务在您使用云平台之前，请您仔细阅读平台服务在您使用云平台之前，请您仔细阅读平台服务在您使用云平台之前，请您仔细阅读平台服务在您使用云平台之前，请您仔细阅读平台服务在您使用云平台之前，请您仔细阅读平台服务在您使用云平台之前，请您仔细阅读平台服务在您使用云平台之前，请您仔细阅读平台服务在您使用云平台之前，请您仔细阅读平台服务在您使用云平台之前，请您仔细阅读平台服务在您使用云平台之前，请您仔细</p>
      </div>
    
    </script>
    <script type="text/javascript" src="../js/jquery.js"></script>
    <script type="text/javascript" src="../js/usider.js"></script>
    <script type="text/javascript" src="../js/layer/layer.js"></script>
    <script type="text/javascript" src="../js/common.js"></script>
    
    <script type="text/javascript" src="../js/jquery.select.js"></script>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script src="../js/jquery.range.js"></script>
    
    <script type="text/javascript">
      $('.paystyle>li').click(function(){
        $(this).find('label>.checkdiv>i').addClass('colorfa');
        $(this).find('label>.checkdiv>input').attr('checked',true);
        $(this).siblings('li').find('label>.checkdiv>i').removeClass('colorfa');
        $(this).siblings('li').find('label>.checkdiv>input').attr('checked',false);
      })

    
      var flag = true;
      function sureBuy(){
        // var id = $('.paystyle>li').find('label>.checkdiv>i.colorfa').attr('id');
        var orderid = $('#orderid').html();
        // window.location.href = "{:U('home/order/notify')}&orderid="+orderid;
        if(flag == true){
            $.ajax({
              url: "{:U('home/order/notify')}",
              type: 'get',
              dataType: 'json',
              data:{
                orderid:orderid
              },
              success: function(res){
                if(res.code == 0){
                    alert(res.msg);
                    window.location.href = res.url;
                }else{
                    alert(res.msg);
                    window.location.href = res.url;
                }
              }
            });
            flag = false;
        }
      }
    </script>
</body>
</html>